<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>患者血液报表</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <script src="/js/echarts.js"></script>
</head>

<body>
<div class="data-manage-table">
    <template>

        <el-form ref="registerForm" :model="registerForm" :rules="registerFormRules" :inline="true" label-position="right" label-width="100px" style="padding:20px 20px 0 20px;">
            <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
<!--            <el-form-item label="患者病历号">-->
<!--                <el-input placeholder="请输入病历号" v-model="patientId" @keyup.enter.native="load"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item  label="病例号" prop="medicalRecordNumber ">
                <el-input v-model="registerForm.medicalRecordNumber"></el-input>
            </el-form-item>
            <el-form-item label="日期">
                <el-date-picker v-model="formDate" type="datetimerange" size="small" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"@click="load" >搜索</el-button>
                <el-button type="">导出</el-button>
                <!--                <el-button type="primary"@click="gettable" >生成统计图</el-button>-->
            </el-form-item>



        </el-form>


        <el-table v-if="tableData":data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                  style="width: 1620px" border
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  @current-change=""
        >
            <el-table-column prop="patientId" label="患者病历号" min-width="12%" align="center">
            </el-table-column>
            <el-table-column prop="name" label="患者姓名" min-width="12%" align="center">
            </el-table-column>
            <el-table-column prop="bloodType" label="血液类型" min-width="15%" align="center">
            </el-table-column>

            <el-table-column prop="bloodCount" label="血液数量" min-width="10%" align="center">
            </el-table-column>
            <el-table-column prop="aboBloodType" label="ABO类型" min-width="5%" align="center">
            </el-table-column>
            <el-table-column prop="rhBloodType" label="rh类型" min-width="5%" align="center">
            </el-table-column>
            <el-table-column prop="department" label="用血科室" min-width="10%" align="center">
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 20px; text-align: center"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1,5,10,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       v-if="tableData":total="tableData.length">
        </el-pagination>
        <el-row :gutter="20">
            <el-col :span="12"><div id="main1" style="border:1px;width:80%;min-height:400px;height:auto;margin-top:5%;"></div></el-col>
            <el-col :span="12"><div id="main" style="border:1px ;width:80%;min-height:400px;height:auto;margin-top:5%;"></div></el-col>

        </el-row>
    </template>
</div>

<script src="/plugins/vue-2.6.11/vue.js"></script>
<script src="/plugins/element-2.4.5/index.js"></script>
<script src="/icons/iconfont.js"></script>

<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>

    (function () {
        var vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {
                const checkJobnum = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('病历号不能为空'))
                    }
                    if (!/^\d+$|^\d+[.]?\d+$/.test(value)) {
                        callback(new Error('请输入正确的病历号'))
                    } else {
                        callback()
                    }
                }
                return {
                    registerForm: {
                        medicalRecordNumber: "121",
                    },
                    registerFormRules : {
                        medicalRecordNumber : [{
                            required : true,
                            message : '病历号不能为空',
                            trigger : 'blur',
                        }, {
                            validator: checkJobnum,
                            trigger : 'blur'
                        }],

                    },
                    //部门选择
                    patientId:'123',
                    myChart:null,
                    mychart1:null,
                    //时间数据的存放
                    formDate:[],
                    //部门
                    stateList:{},
                    //翻页
                    currentPage: 1, // 当前页码
                    total: null, // 总条数
                    pageSize:5 , // 每页的数据条数
                    //数据字典
                    stateListAbo:{},
                    stateListRh:{},
                    stateListVarity:{},
                    //表格信息
                    tableData: [
                        {
                            patientId:'',
                            name:'',
                            bloodType: "",
                            bloodCount: "",
                            aboBloodType: "",
                            rhBloodType: "",
                            department:""
                        }
                    ],
                    temptable:[
                        {
                            bloodType: "",
                            bloodCount: "",
                        }
                    ]
                }
            },
            created(){
                this.getNowTime ()
                this.getAboState()
                this.getRhState()
                this.getVarityState()
                this.getState()
            },
            methods: {
                //每页条数改变时触发 选择一页显示多少行
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.currentPage = 1;
                    this.pageSize = val;
                },
                //当前页改变时触发 跳转其他页
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage = val;
                },

                //数据字典
                getAboState(){
                    fetch(`/aboType/normal/getName`).then(res => res.json()).then(res => {

                        if (res.code == 200){
                            this.stateListAbo = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getRhState(){
                    fetch(`/rhType/normal/getName`).then(res => res.json()).then(res => {

                        if (res.code == 200){
                            this.stateListRh = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getVarityState(){
                    fetch(`/bloodComposition/normal/getName`).then(res => res.json()).then(res => {

                        if (res.code == 200){
                            this.stateListVarity = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getStateAbo(code){
                    for (var i=0;i<this.stateListAbo.length;i++){
                        if (this.stateListAbo[i].code == code){
                            return this.stateListAbo[i].name
                        }
                    }
                },
                getStateRh(code){
                    for (var i=0;i<this.stateListRh.length;i++){
                        if (this.stateListRh[i].code == code){
                            return this.stateListRh[i].name
                        }
                    }
                },
                getStateVarity(code){
                    for (var i=0;i<this.stateListVarity.length;i++){
                        if (this.stateListVarity[i].code == code){
                            return this.stateListVarity[i].composition
                        }
                    }
                },
                getState(){
                    fetch(`/bloodInformation/normal/listDepartment`).then(res => res.json()).then(res => {
                        if (res.code === 200){
                            this.stateList = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },

                // 将表格中的State字段的code转换成name

                getNowTime () {
                    var date = new Date();
                    var year = date.getFullYear();
                    var lastyear = year-1
                    var month = (date.getMonth() + 1) < 10?'0'+(date.getMonth() + 1):(date.getMonth() + 1);
                    var day = date.getDate()<10?'0'+date.getDate():date.getDate();
                    var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    this.formDate[1]=(year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second)
                    this.formDate[0]=(lastyear + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second)

                },
                dateFormat(picker){
                    this.formDate = [picker[0], picker[1]]
                },
                myEcharts(mycars,mycarstow){
                    //实例化
                    this.mychart1 =  echarts.init(document.getElementById('main1'));
                    option = {
                        title: {
                            text: "患者各类血液使用情况",
                            left: 'center'
                        },
                        legend: {
                            top: '8%',
                            data: ['血液消耗情况']
                        },
                        xAxis: {
                            type: 'category',
                            data: mycars,
                            axisLabel: {
                                borderWidth: 1,
                                clickable: true
                            },
                            silent: false,
                            triggerEvent: true
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '患者各类血液使用情况',
                                type: 'bar',
                                data: mycarstow
                            }
                        ]
                    };
                    this.mychart1.setOption(option);
                    this.mychart1.on('click', (params)=> {
                        if(params.componentType == "xAxis"){
                            if (this.myChart!=null){
                                this.myChart.dispose()
                            }
                            this.pieChart(params.value);
                        }
                    });
                },
                pieChart(){
                    this.myChart = echarts.init(document.getElementById('main'));
                    let arr = Array.from(this.tableData)

                    // console.log(arr)
                    let item = {};
                    for (let i = 0; i < arr.length; i++) {
                        for (var j=0;j<this.stateList.length;j++){
                            if (this.stateList[j].code == arr[i].department){
                                arr[i].department= this.stateList[j].name
                            }
                        }
                        item[arr[i].department] = ~~item[arr[i].bloodType] + arr[i].bloodCount;
                    }

                    var mycars=new Array();//string型数组
                    var mycarstow=new Array();//int型数组
                    //先加载后台数据 对获取的数据进行分组 且写入对应位置的数组中
                    Object.keys(item).forEach(function (key) {
                        mycars.push(key);
                        mycarstow.push({value:item[key],name:key});
                    })

                    option = {
                        title:{
                            text:"血液流向科室明细",
                            left:'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            top: '8%',
                            data:mycars
                        },
                        series: [
                            {
                                name: 'department',
                                type: 'pie',
                                radius: ['45%', '60%'],
                                labelLine: {
                                    length: 30
                                },
                                label: {
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#F6F8FC',
                                    borderColor: '#8C8D8E',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: '#6E7079',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        hr: {
                                            borderColor: '#8C8D8E',
                                            width: '100%',
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: '#4C5058',
                                            fontSize: 14,
                                            fontWeight: 'bold',
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#fff',
                                            backgroundColor: '#4C5058',
                                            padding: [3, 4],
                                            borderRadius: 4
                                        }
                                    }
                                },
                                data: mycarstow
                            }
                        ]
                    };
                    this.myChart.setOption(option);
                },
                draw(){
                    let arr = Array.from(this.tableData).slice()
                    const aboBloodType = this.getStateAbo(arr[0].aboBloodType);
                    const rhBloodType = this.getStateRh(arr[0].rhBloodType);
                    for (let i = 0; i < arr.length; i++) {
                        arr[i].bloodType = this.getStateVarity(arr[i].bloodType);
                        arr[i].rhBloodType = rhBloodType;
                        arr[i].aboBloodType = aboBloodType;
                    }
                    // console.log(arr)
                    let item = {};
                    for (let i = 0; i < arr.length; i++) {
                        item[arr[i].bloodType] = ~~item[arr[i].bloodType] + arr[i].bloodCount;
                    }
                    var mycars=new Array();//string型数组
                    var mycarstow=new Array();//int型数组
                    //先加载后台数据 对获取的数据进行分组 且写入对应位置的数组中
                    Object.keys(item).forEach(function (key) {
                        mycars.push(key);
                        mycarstow.push(item[key]);
                    })
                    this.myEcharts(mycars,mycarstow);
                    this.pieChart();

                },
                load() {
                    //清空画布
                    if (this.myChart!=null){
                        this.myChart.dispose()
                    }
                    if(this.mychart1!=null){
                        this.mychart1.dispose()
                    }
                    this.tableData=undefined

                    fetch(`/bloodInformation/normal/getPersonBloodInfo?patientId=${this.registerForm.medicalRecordNumber}&startTime=${this.formDate[0]} &endTime=${this.formDate[1]}`).then(res => res.json()).then(res => {
                        this.tableData = res.data
                        //此是this的指向已经转变为method而非实例所以采用bind绑定this
                        this.$options.methods.draw.bind(this)();
                    })
                    //绘制图表数据

                }

                ,
            }
        });
    })()
</script>

</body>

</html>
